<template>
  <div class="full-width">
    <!-- 名称 -->
    <div v-if="hasPercent">
      {{data.label}}：{{data.count}}
    </div>
    <div class="flex justify-between" v-else>
      <div class="not-fill-detail" @click="toList()" :class="{'disable': !data.count}">
        {{ data.label }}
        <q-icon name="iconfont icontubiao2-95" size="16px" style="margin-top: -2px"/>
      </div>
      <div>{{data.count}}台</div>
    </div>
    <!-- 进度条 -->
    <div class="full-width flex justify-between items-center margin-t-10">
      <div class="progress position-relative flex-1">
        <div class="p-children position-absolute" :style="{ background: data.color, width: getWidth(data.count) }"></div>
      </div>
      <div v-if="hasPercent" style="width: 55px" class="text-right">{{getWidth(data.count) || '0%'}}</div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'progress-box',
  props: {
    data: Object,
    total: Number,
    hasPercent: Boolean
  },
  methods: {
    getWidth (val) {
      if (!this.total) return 0
      return `${Number(val / this.total * 100).toFixed(2)}%`
    },
    toList () {
      this.data.count && this.$emit('toList', this.data)
    }
  }
}
</script>

<style scoped lang="stylus">
  .progress{
    height 16px
    background #e8e8e8
    border-radius 8px
    overflow hidden
  }
  .p-children{
    height 16px
    border-radius 8px
    transition width 500ms ease
  }
  .not-fill-detail {
    color $primary
    cursor pointer
    user-select none
  }
  .disable {
    color #999999
    cursor not-allowed
  }
</style>
